<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT HTTP API 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .api-section {
            margin-bottom: 30px;
        }
        .api-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
            border-left: 4px solid #007bff;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        input, textarea {
            width: 300px;
            padding: 5px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .result {
            background: #e8f5e8;
            border: 1px solid #4caf50;
            padding: 10px;
            border-radius: 3px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 200px;
            overflow-y: auto;
        }
        .error {
            background: #ffe8e8;
            border: 1px solid #f44336;
        }
        .method {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }
        .get { background: #4caf50; color: white; }
        .post { background: #2196f3; color: white; }
        .delete { background: #f44336; color: white; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 MQTT HTTP API 测试工具</h1>
        <p>这个工具可以测试所有的MQTT HTTP API接口，类似于您展示的GMQT平台功能。</p>
    </div>

    <div class="container">
        <h2>📋 客户端管理</h2>
        
        <div class="api-section">
            <div class="api-item">
                <span class="method get">GET</span>
                <strong>/api/mqtt/client/getList</strong> - 获取所有客户端列表
                <br>
                <button onclick="getClientList()">获取客户端列表</button>
                <div id="clientList-result"></div>
            </div>

            <div class="api-item">
                <span class="method get">GET</span>
                <strong>/api/mqtt/client/getTopicList</strong> - 获取所有订阅主题
                <br>
                <button onclick="getTopicList()">获取主题列表</button>
                <div id="topicList-result"></div>
            </div>

            <div class="api-item">
                <span class="method get">GET</span>
                <strong>/api/mqtt/client/getStatus</strong> - 获取客户端状态
                <br>
                <input type="text" id="statusClientId" placeholder="客户端ID" value="HarmonyOS设备1">
                <button onclick="getClientStatus()">获取状态</button>
                <div id="clientStatus-result"></div>
            </div>

            <div class="api-item">
                <span class="method get">GET</span>
                <strong>/api/mqtt/client/getTopicInfo</strong> - 获取客户端订阅信息
                <br>
                <input type="text" id="topicInfoClientId" placeholder="客户端ID" value="HarmonyOS设备1">
                <button onclick="getTopicInfo()">获取订阅信息</button>
                <div id="topicInfo-result"></div>
            </div>

            <div class="api-item">
                <span class="method delete">DELETE</span>
                <strong>/api/mqtt/client/dellink</strong> - 断开客户端连接
                <br>
                <input type="text" id="disconnectClientId" placeholder="客户端ID">
                <button onclick="disconnectClient()">断开连接</button>
                <div id="disconnect-result"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>📡 消息管理</h2>
        
        <div class="api-section">
            <div class="api-item">
                <span class="method post">POST</span>
                <strong>/api/mqtt/message/publish</strong> - 发布消息
                <br>
                <input type="text" id="publishTopic" placeholder="主题" value="heart">
                <input type="text" id="publishMessage" placeholder="消息内容" value="Hello from HTTP API">
                <button onclick="publishMessage()">发布消息</button>
                <div id="publish-result"></div>
            </div>

            <div class="api-item">
                <span class="method post">POST</span>
                <strong>/api/mqtt/client/injection</strong> - 客户端注入
                <br>
                <input type="text" id="injectionClientId" placeholder="目标客户端ID" value="HarmonyOS设备1">
                <input type="text" id="injectionTopic" placeholder="主题" value="heart">
                <input type="text" id="injectionPayload" placeholder="消息内容" value="Injection test">
                <button onclick="injectMessage()">注入消息</button>
                <div id="injection-result"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>🔐 认证管理</h2>
        
        <div class="api-section">
            <div class="api-item">
                <span class="method post">POST</span>
                <strong>/api/mqtt/accessToken</strong> - 获取访问Token
                <br>
                <input type="text" id="tokenSecret" placeholder="密钥" value="test_secret">
                <button onclick="getAccessToken()">获取Token</button>
                <div id="token-result"></div>
            </div>
        </div>
    </div>

    <script>
        const baseUrl = 'http://localhost:3000';

        async function apiCall(method, url, data = null) {
            try {
                const options = {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                    }
                };
                
                if (data) {
                    options.body = JSON.stringify(data);
                }
                
                const response = await fetch(baseUrl + url, options);
                const result = await response.json();
                return { success: response.ok, data: result };
            } catch (error) {
                return { success: false, error: error.message };
            }
        }

        function displayResult(elementId, result) {
            const element = document.getElementById(elementId);
            element.className = 'result ' + (result.success ? '' : 'error');
            element.textContent = JSON.stringify(result, null, 2);
        }

        async function getClientList() {
            const result = await apiCall('GET', '/api/mqtt/client/getList');
            displayResult('clientList-result', result);
        }

        async function getTopicList() {
            const result = await apiCall('GET', '/api/mqtt/client/getTopicList');
            displayResult('topicList-result', result);
        }

        async function getClientStatus() {
            const clientId = document.getElementById('statusClientId').value;
            const result = await apiCall('GET', `/api/mqtt/client/getStatus?clientId=${encodeURIComponent(clientId)}`);
            displayResult('clientStatus-result', result);
        }

        async function getTopicInfo() {
            const clientId = document.getElementById('topicInfoClientId').value;
            const result = await apiCall('GET', `/api/mqtt/client/getTopicInfo?clientId=${encodeURIComponent(clientId)}`);
            displayResult('topicInfo-result', result);
        }

        async function disconnectClient() {
            const clientId = document.getElementById('disconnectClientId').value;
            const result = await apiCall('DELETE', `/api/mqtt/client/dellink?clientId=${encodeURIComponent(clientId)}`);
            displayResult('disconnect-result', result);
        }

        async function publishMessage() {
            const topic = document.getElementById('publishTopic').value;
            const message = document.getElementById('publishMessage').value;
            const result = await apiCall('POST', '/api/mqtt/message/publish', { topic, message });
            displayResult('publish-result', result);
        }

        async function injectMessage() {
            const clientId = document.getElementById('injectionClientId').value;
            const topicName = document.getElementById('injectionTopic').value;
            const payload = document.getElementById('injectionPayload').value;
            const result = await apiCall('POST', '/api/mqtt/client/injection', { 
                clientId, topicName, payload, listener: 'local' 
            });
            displayResult('injection-result', result);
        }

        async function getAccessToken() {
            const secret = document.getElementById('tokenSecret').value;
            const result = await apiCall('POST', '/api/mqtt/accessToken', { secret });
            displayResult('token-result', result);
        }

        // 页面加载时自动获取客户端列表
        window.onload = function() {
            getClientList();
        };
    </script>
</body>
</html>